<%--
  Created by IntelliJ IDEA.
  User: JYC
  Date: 2022/4/18
  Time: 19:32:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<table class="easyui-datagrid" id="role_dg">
</table>

<%--datagrid控件工具栏--%>
<div id="role_toolbar">
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add"
       plain="true" onclick="newCar()">添加角色</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit"
       plain="true" onclick="editCar()">修改角色</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove"
       plain="true" onclick="destroyCar()">删除角色</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove"
       plain="true" onclick="roleMenu()">角色授权</a>
</div>
<div id="role_menu_dlg" class="easyui-dialog" style="width:400px;height: 400px;"
     data-options="closed:true,modal:true,border:'thin',buttons:'#role_dlg-buttons'">
    <div id="roleMenuTree" class="ztree"></div>
</div>
<%--对话框按钮--%>
<div id="role_dlg-buttons">
    <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok"
       onclick="saveRoleMenu()" style="width:90px">保存</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel"
       onclick="javascript:$('#role_menu_dlg').dialog('close')" style="width:90px">关闭</a>
</div>
<script type="text/javascript">
    /*定义加载事件*/
    $(function () {
        loadRoleList();
    });

    /*加载车辆列表信息*/
    function loadRoleList() {
        $("#role_dg").datagrid({
            url: "rolelist",
            singleSelect: true,
            fitColumns: true,
            fit: true,
            pagination: true,
            rownumbers: true,
            title: '角色列表',
            iconCls: 'icon-ok',
            toolbar: "#role_toolbar",
            columns: [[
                {field: 'roleid', title: '角色编号', width: 100},
                {field: 'rolename', title: '角色名称', width: 120},
                {field: 'roledesc', title: '角色描述', width: 200, align: 'right'}
            ]]
        });
    }
    /*打开角色授权对话框*/
    function roleMenu(){
        var row=$("#role_dg").datagrid("getSelected");
        if(row){
            //打开对话框
            $("#role_menu_dlg").dialog("open").dialog("setTitle","角色授权");
            loadRoleMenuId(row.roleid);
            //渲染显示ztree树
            loadRoleMenu();
        }
    }
    /*加载meun菜单树*/
    function loadRoleMenu(){
        /*实现树节点属性的配置*/
        var setting = {
            data: {
                simpleData: {
                    enable: true,
                    pIdKey: "pid" /*指定响应的json对象的父节点id*/
                }
            },
            check: {
                enable: true /*显示复选框*/
            }
        };
        $.post("menuList",'',function(zNodes){
            $.fn.zTree.init($("#roleMenuTree"), setting, zNodes);
        },"json");
    }
    /*发送角色授权的ajax请求*/
    function saveRoleMenu(){
        //获得选中的树节点的集合
        var row=$("#role_dg").datagrid("getSelected");
        var treeObj = $.fn.zTree.getZTreeObj("roleMenuTree");
        var nodes = treeObj.getCheckedNodes(true);
        let mids = [];
        for(var x=0;x<nodes.length;x++){
            mids.push(nodes[x].id);
        }
        // console.log(mids);
        $.post("saveRoleMenu","rid="+row.roleid+'&mids='+mids,function(result){
            // console.log(result)
            if(result.errorMsg){
                //有错误
                $.messager.show({
                    title:'提示',
                    msg:result.errorMsg
                });
            }else{
                $("#role_menu_dlg").dialog("close")
            }
        },"json");
    }

    /*发送ajax，查询被选中的角色对应的菜单节点id*/
    function loadRoleMenuId(rid){
        $.post("roleMenuId","rid="+rid,function(result){
            //获得ztree树对象
            var treeObj = $.fn.zTree.getZTreeObj("roleMenuTree");
            //遍历需要选中的节点id集合
            $.each(result,function(index,item){
                //获得需要被选中的节点(json对象)
                var node = treeObj.getNodeByParam("id", item, null);
                //实现节点选中
                treeObj.checkNode(node,true,false,false);
            });


            console.log(result);
        },"json");
    }
</script>
</body>
</html>
